<template>
  <div id="app">
    <div class="app-container">
      <h1 class="app-title">AI聊天助手</h1>
      <ChatComponent 
        :initial-images="demoImages"
        :enable-multimodal="true"
        @send-message="handleSendMessage"
      />
      <!-- 
        多模态配置说明:
        :enable-multimodal="true"  - 启用多模态支持(支持上传图片和文件)
        :enable-multimodal="false" - 禁用多模态支持(默认,仅支持文本聊天)
      -->
    </div>
  </div>
</template>

<script>
import ChatComponent from './components/ChatComponent.vue'

export default {
  name: 'App',
  components: {
    ChatComponent
  },
  data() {
    return {
      // 示例图片列表(格式: { url: string, file: File|null })
      demoImages: [
        { url: 'https://example.com/image1.jpg', file: null },
        { url: 'https://example.com/image2.jpg', file: null }
      ]
    }
  },
  methods: {
    handleSendMessage(data) {
      console.log('=== 发送消息 ===')
      console.log('文本:', data.text)
      console.log('图片:', data.images)
      console.log('文件:', data.files)
      console.log('聊天参数:', data.chatParams)
      console.log('API请求格式:', JSON.stringify(data.chatParams, null, 2))
      // 这里组件已经自动调用AI接口，无需额外处理
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

#app {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.app-container {
  width: 100%;
  max-width: 900px;
  height: 100%;
  max-height: 800px;
  display: flex;
  flex-direction: column;
}

.app-title {
  color: white;
  text-align: center;
  margin-bottom: 20px;
  font-size: 28px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
</style>
